extends common/layout
block content
    link(href="../css/shop-decoration.min.css" rel="stylesheet" type="text/css")
    link(rel='stylesheet' type='text/css' href='../css/zTreeStyle.css')
    div.shop-decoration-container
        div.btn-container
            div.opt-wrap
                button.btn.active PC端
                button.btn 移动端
            div.btn-wrap
                button.btn.btn-border-orange 预览
                button.btn.btn-orange 发布
        div.color-container.clearfix
            span 配色方案：
            div.color-lump.blue-bg
            div.color-lump.green-bg
            div.color-lump.orange-bg
            div.color-lump.yellow-bg
            div.color-lump.red-bg
            div.color-lump.black-bg
        div.signage-container
            img(src="../image/main15.png")
            div.hidden-block
                button(data-target="#imageModal" data-toggle="modal") 编辑
        div.tab-container
            div.red-bg.deco-color
                div.deco-item 店铺首页
                div.deco-item 全部宝贝
                div.deco-item 上装
                div.deco-item 下装
                div.deco-item 裙装
                div.hidden-block
                    button(data-target="#editNavModal" data-toggle="modal") 编辑
        div.banner-container
            ul
                li
                    img(src="../image/main102.jpg")
                li
                    img(src="../image/main15.png")
                li
                    img(src="../image/main3.png")
            div.hidden-block
                button(data-toggle="modal" data-target="#editBannerModal") 编辑
        div.product-container.clearfix
            div.float-left
                div.search-wrap
                    p.deco-color.red-bg 店内搜
                    div.input-group
                        div.input-block
                            span 关键字：
                            input(type="text")
                        div.input-block.price-block
                            span 价格：
                            input(type="text")
                            i -
                            input(type="text")
                        div.btn-container
                            button.deco-color.red-bg 搜索
                div.class-container
                    p.deco-color.red-bg 商品分类
                    div.class-content
                        div.level-1 查看全部宝贝
                        div.level-2.all-find
                            a 按综合
                            a 按销量
                            a 按新品
                            a 按价格
                        div.level-1 NEW ARRIVALS
                        div.level-2
                            a 2018.3.06NEW
                            a 春季新装Winn
                            a 2017.12.12双十二
                            a 2018.1.25NEW
                            a 2018.3.06NEW
                            a 春季新装Winn
                            a 2017.12.12双十二
                            a 2018.1.25NEW
                        div.level-1 折扣专区
                        div.level-2
                            a 2018.3.06NEW
                            a 春季新装Winn
                            a 2017.12.12双十二
                            a 2018.1.25NEW
                            a 2018.3.06NEW
                            a 春季新装Winn
                            a 2017.12.12双十二
                            a 2018.1.25NEW
                div.rank-container
                    p.deco-color.red-bg 商品排行
                    div.rank-content
                        div.btn-container
                            button.btn.active 销量数
                            button.btn 收藏数
                        div.product-list
                            div.product-item.clearfix
                                img(src="../image/main8.png")
                                div.desc-r
                                    p.title 花栗鼠小姐 红色格子V领
                                    p.price
                                        span.gray-font ￥
                                        span 135.00
                                    p.gray-font 已收藏11220笔
                            div.product-item.clearfix
                                img(src="../image/main8.png")
                                div.desc-r
                                    p.title 花栗鼠小姐 红色格子V领
                                    p.price
                                        span.gray-font ￥
                                        span 135.00
                                    p.gray-font 已收藏11220笔
                            div.product-item.clearfix
                                img(src="../image/main8.png")
                                div.desc-r
                                    p.title 花栗鼠小姐 红色格子V领
                                    p.price
                                        span.gray-font ￥
                                        span 135.00
                                    p.gray-font 已收藏11220笔


            div.float-right
                div.recommend-container
                    p.deco-color.red-bg
                        span 推荐宝贝
                        a.more-r 查看更多
                    div.row.clearfix
                        -for(var i = 1; i < 8; i++){
                        div.product-item
                            div.opt-wrap
                                img(src="../image/main9.png")
                                p.title 花栗鼠小姐卡欺负女中长款春秋季2017新款韩版小个子双排扣外套
                                div.price-b
                                    span.gray-font ￥
                                    span 279.00
                                    span.gray-font.price-line ￥479.00
                                    span.gray-font.num-r 已售：293件
                        -}
                div.recommend-container
                    p.deco-color.red-bg
                        span 新品上新
                        a.more-r 查看更多
                    div.row.clearfix
                        -for(var i = 1; i < 8; i++){
                        div.product-item
                            div.opt-wrap
                                img(src="../image/main9.png")
                                p.title 花栗鼠小姐卡欺负女中长款春秋季2017新款韩版小个子双排扣外套
                                div.price-b
                                    span.gray-font ￥
                                    span 279.00
                                    span.gray-font.price-line ￥479.00
                                    span.gray-font.num-r 已售：293件
                        -}
    div.modal.fade(id="editNavModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 编辑导航
                    button.btn.close(type="button" data-dismiss="modal") &times;
                div.modal-body
                    div.default
                        span 店铺首页
                        span.gray-font (默认)
                    div.default
                        span 全部宝贝
                        span.gray-font (默认)
                    div.set-category
                        div.level-1(data-id="10")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="111" data-to="level-2-10")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-to="level-2-10")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                        div.level-1(data-id="11")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="134" data-to="level-2-11")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-id="156" data-to="level-2-11")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                        div.level-1(data-id="12")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="135" data-to="level-2-12")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-id="157" data-to="level-2-12")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                        div.level-1(data-id="13")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="135" data-to="level-2-13")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-id="157" data-to="level-2-13")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                        div.level-1(data-id="14")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="138" data-to="level-2-14")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-id="158" data-to="level-2-14")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                        div.level-1(data-id="15")
                            input.next-check(type="checkbox")
                            label.next
                                span 裙装
                                i.iconfont
                        div.level-2(data-id="139" data-to="level-2-15")
                            input.next-check(type="checkbox")
                            label.next
                                span 纱裙
                        div.level-2(data-id="159" data-to="level-2-15")
                            input.next-check(type="checkbox")
                            label
                                span 牛仔裙
                    div.tip-wrap 最多可设置5项一级内容

                div.modal-footer
                    button.btn.btn-border-orange(data-dismiss="modal") 取消
                    button.btn.btn-orange(data-dismiss="modal") 确定
    div.modal.fade(id="editBannerModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 编辑轮播
                    button.btn.close(type="button" data-dismiss="modal") &times;
                div.modal-body
                    div.set-height
                        span *模块高度：
                        input(type="text")
                        span PX
                        span.gray-font 请设置在100~600px之间
                    div.set-banner
                        div.banner-title.clearfix
                            span.percent-70 图片
                            span.percent-30 操作
                        -for(var i = 1; i < 6; i++) {
                        div.banner-item.clearfix
                            div.percent-70.clearfix
                                div.img-wrap
                                    div.null-img-cont
                                        img(src="../image/default_img.png")
                                        p 图片上传
                                    div.img-cont.hidden
                                        img(src="../image/detail.png")
                                        p 更换图片

                                span 商品链接：
                                input.file-input(type="text")
                            div.percent-30
                                i.icon.icon-up
                                i.icon.icon-down
                                i.icon.icon-delete3
                        -}
                div.modal-footer
                    button.btn.btn-border-orange(data-dismiss="modal") 取消
                    button.btn.btn-orange(data-dismiss="modal") 确定
    div.modal.fade.imageModal(id="imageModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 图片空间
                    button.close(type="button" data-dismiss="modal") &times;
                div.modal-body.clearfix
                    div.menu-l
                        ul.ztree(id="tree")
                        div.href-block
                            a(href="imageSpace.html") 进入图片管理
                    div.image-r
                        div.btn.btn-file 选择上传图片
                            input(type="file")
                        div.row-wrap
                            div.item-group.clearfix
                                -for(var i = 0; i < 20; i++) {
                                div.item-wrap
                                    div.opt-item
                                        div.img-wrap
                                            img(src="../image/main2.png")
                                        p.file-name 700*700
                                        input(type="radio" name="image")
                                -}

    script(src="../js/banner.js")
    script(src = "../js/jquery.ztree.core.min.js")
    script(src="../js/page.js")
    script.
        $("#editBannerModal").modal("show");
        var total = 5;
        $(".level-1 .next").click(function () {
            formatCategory($(this), 2);
        })
        $(".level-1 .next-check").change(function () {
            formatChangeCategory($(this), 2);
            var length = $(".set-category .level-1").length;
            if(length > total) {
                if($(".level-1 .next-check:checked").length >= total) {
                    $(".level-1 .next-check").each(function () {
                        if(!$(this).get(0).checked) {
                            $(this).attr("disabled", "disabled");
                        }
                    })
                }else {
                    $(".level-1 .next-check").each(function () {
                        if (!$(this).get(0).checked) {
                            $(this).removeAttr("disabled");
                        }
                    })
                }
            }
        })

        $(".icon-up").click(function () {
            var itemELe = $(this).parent().parent();
            var index = itemELe.index();
            if(index == 1) {
                return;
            }
            $(".banner-item").each(function (i) {
                if(i == (index-1)) {
                    $(".banner-item").eq(i-1).before(itemELe);
                }
            })
        })

        $(".icon-down").click(function () {
            var itemELe = $(this).parent().parent();
            var index = itemELe.index();
            if (index == 5) {
                return;
            }
            $(".banner-item").each(function (i) {
                if (i == (index - 1)) {
                    $(".banner-item").eq(i + 1).after(itemELe);
                }
            })
        })

        $(".icon-delete3").click(function () {
            $(this).parent().parent().find(".file-input").val("");
        })

        //$(".banner-container").css("height", "100px");
        
        $(".color-lump").click(function () {
            var className = $(this).attr("class");
            var nameArr = className.split(" ");
            $(".deco-color").each(function () {
                $(this).removeClass().addClass("deco-color " + nameArr[1]);
            })
        })

        //页面滚动执行事件
        $(".row-wrap").scroll(function () {
            loadMore($(this), function () {
                var result = "";
                for (var i = 0; i < 20; i++) {
                    result += '<div class="item-wrap"><div class="opt-item"><div class ="img-wrap"><img src="../image/main2.png"></div><p class="file-name">700 * 700</p><input type="radio" name ="image"></div></div>'
                }
                setTimeout(function () {
                    //$(".load-more").remove();
                    $('.item-group').append(result);
                    page += 1;
                    finished = 0;
                    console.log(page);
                    //最后一页
                    if (page == 10) {
                        sover = 1;
                        loadOver();
                    }
                }, 1000);
            });
        });

        var treeObj;
        var setting = {
            view: {
                showIcon: false
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes = [
            {
                id: 10,
                name: "我的图片",
                open: true,
                children: [
                    {
                        id: 111,
                        name: "宝贝图片",
                        children: [
                            {
                                id: 123,
                                name: "测试"
                            }
                        ]
                    },
                    {
                        id: 112,
                        name: "店铺装修",
                        children: [
                            {
                                id: 124,
                                name: "轮播图"
                            },
                            {
                                id: 125,
                                name: "商品图"
                            },
                            {
                                id: 126,
                                name: "商品图"
                            }
                        ]
                    }
                ]
            }
        ];
        treeObj = $.fn.zTree.init($(".ztree"), setting, zNodes);
        treeObj.selectNode(treeObj.getNodeByParam("id", 10));

        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.id + ", " + treeNode.name);
        };

        initBannerData();

        $(".btn-orange").click(function () {
            var html = '<li><img src="../image/main102.jpg"></li><li><img src="../image/main102.jpg"></li><li><img src="../image/main102.jpg"></li><li><img src="../image/main15.png"></li><li><img src="../image/main3.png"></li>';
            $(".banner-container ul").append(html);
            initBannerData();
        })


